<template>
    <div>
        <div class="search">
            <div class="con">
                <el-autocomplete placeholder="请输入要查找的医院" v-model="keyWord" :fetch-suggestions="fetchData" :trigger-on-focus="false" @select="goDetail"/>
                <el-button type="primary" icon="Search" @click="" ></el-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router';
import { getHosByName } from '@/api/hospital/index'
import type { hosByName } from '@/api/hospital/type'
let $router = useRouter()

let keyWord = ref<string>('')


const fetchData =async (keyWord: string, cb: any) => { 
    // cb 回调展示数据
    let result: hosByName = await getHosByName(keyWord);
    let showData = result.data.map((item) => { 
        return {
            value: item.hosname,
            hoscode:item.hoscode
        }
    })
    cb(showData)
}

const goDetail = (item:any) => { 
    $router.push({
        path: "/hospital/registered",
        query: {hosCode:item.hoscode}
    })
    
}
</script>

<style lang="scss" scoped>
.search {
    width: 100%;
    height: 100px;
    display:flex;
    justify-content: center;
    align-items: center;
    // 深度改变element样式
    :deep(.el-input__wrapper){
        width: 900px;
        height: 40px;
    }
    :deep(.el-button--primary){
        width: 40px;
        height: 40px;
    }
}
</style>